<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-handle">
                <el-form :inline="true">
                    <el-form-item label="任务名称">
                        <el-input v-model="page.po.name" placeholder="任务名称" clearable />
                    </el-form-item>

                    <el-form-item label="项目">
                        <el-input v-model="page.po.projectId" placeholder="项目" clearable />
                    </el-form-item>

                    <el-form-item label="团队">
                        <el-select v-model="page.po.userGroupId" class="m-2" placeholder="团队" clearable :fit-input-width="true">
                            <el-option v-for="item in userGroupList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div class="layout-container-form-search">
                <div>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @getTableData="getTableData">

                <el-table-column type="index" label="序号" />

                <el-table-column prop="name" label="名称" align="center" />

                <el-table-column prop="project" label="项目" align="center" />

                <el-table-column prop="email" label="任务类别" align="center" />

                <el-table-column prop="userGroupId" label="所属团队" align="center" />

                <el-table-column prop="annotatorId" label="标注员" align="center" />

                <el-table-column prop="status" label="状态" align="center" />

                <el-table-column prop="status" label="优先级" align="center" />

                <el-table-column prop="reviewStatus" label="审核状态" align="center" />

                <el-table-column prop="reviewStatus" label="创建时间" align="center" />

                <el-table-column label="操作" align="center" fixed="right" width="320">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="audit(scope.row)">审核</el-button>
                        <el-button type="primary" size="small" @click="log(scope.row)">日志</el-button>
                    </template>
                </el-table-column>
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onActivated, onMounted, reactive, ref} from 'vue'
import Table                                   from '@/components/table/index.vue'
import {page as getPage}                       from "@/api/annotation"

const loading   = ref(false)
const tableData = ref([])

interface PageInterface {
    current: any,
    size: any,
    total: any,
    ascs: any,
    descs: any,
    po: any
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    ascs   : [],
    descs  : [],
    po     : {}
})

// 获取表格数据
const getTableData = () => {
    loading.value = true
    getPage(page).then(res => {
        tableData.value = res?.data?.records || []
    }).finally(() => {
        loading.value = false
    })
}

function audit(user: any) {
    // todombb
}

function log(user: any) {
    // todombb
}

// 团队列表
const userGroupList = ref([])

function initParam() {
    // todombb 加载团队
    // todombb 加载角色
}

onMounted(() => {
    initParam()
    getTableData()
})

onActivated(() => {
    getTableData()
})

</script>

<style>

</style>

